<template>
    <div class="bottom">
        <div class="bottomleft">
            <div class="characters">
                <h2>产品中心</h2>
            </div>
            <ul class="oneul">
                <li v-for="item in font">> <a href="#">{{ item }}</a></li>
            </ul>
            <ul>
                <li v-for="item2 in font2">> <a href="#">{{ item2 }}</a></li>
            </ul>
            <ul>
                <li v-for="item3 in font3">> <a href="#">{{ item3 }}</a></li>
            </ul>
        </div>
        <div class="bottomcenter">
            <div class="technology">
                <h2>技术研发</h2>
            </div>
            <ul>
                <li v-for="item4 in font4">> <a href="#">{{ item4 }}</a></li>
            </ul>
        </div>
        <div class="bottomright">
            <div class="yinxiao">
            <h2>营销网络</h2>
            </div>
            <div class="picture"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref,reactive} from 'vue'
const font=ref(['汽车电机','日用电机','特种电机','大功率电机','电工设备'])
const font2=ref(['工业驱动和自动化','高压变频和系统集成','混泥土搅拌机','电动车辆'])
const font3=ref(['电池电源','输变电设备','楼盘信息','金融产品'])
const font4=ref(['科技力量','先进设备','研发创新','工艺流程'])
</script>
<style scoped lang="less">
a{
    color: #6f6f6f;
}
.bottom {
    width: 1000px;
    height: 250px;
    background-color: #e5e5e5;
}
.bottomleft{
    float: left;
}

.characters {
    width: 453px;
    height: 36px;
    border-bottom: 1px solid #c3c3c3;
    margin-left: 20px;
}

.oneul{
    margin-left: 20px;
}
.bottomleft ul{
    float: left;
    margin-left: 20px;
    margin-top: 20px;
}


ul li{
    line-height: 25px;
}
.bottomcenter{
    float: left;
    height: 250px;
}
.bottomcenter ul{
    margin-left: 58px;
    margin-top: 50px;
}
.technology{
    width: 150px;
    height: 30px;
    float: left;
    border-bottom:1px solid #c3c3c3 ;
    margin-left: 45px;
    margin-top: 5px;
}
.bottomright{
    float: left;
    height: 250px;
    margin-left: 50px;
}
.yinxiao{
    width: 200px;
    height: 30px;
    float: left;
    border-bottom:1px solid #c3c3c3 ;
    margin-left: 45px;
    margin-top: 5px;
}
.picture{
    margin-top: 50px;
    width: 200px;
    height: 150px;
    background:url(../assets/img/map.png);
}
</style>